<template>
  <dv-border-box-12 :color="['#50649a', '#50649b']">
    <div class="GEmain-content">
      <select
        class="xuanze"
        name="年份"
        id="change"
        @change="changeYear($event.target.value)"
      >
        <option value="1年">2019</option>
        <option value="2年">2018</option>
        <option value="3年">2017</option>
        <option value="历届">历届</option>
      </select>
      <div id="GEmain"></div></div
  ></dv-border-box-12>
</template>

<script>
import * as echarts from "echarts/core";
import { zhuti } from "@/assets/index.js";
import {
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

export default {
  name: "GECompoments",
  data() {
    return {
      info: [],
      xAxisData: [],
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      year: "1年", // 选中的年份
    };
  },
  methods: {
    changeYear(value) {
      this.year = value;
      // console.log("改变年份,", this.year);
      this.xAxisData = [];
      this.data1 = [];
      this.data2 = [];
      this.data3 = [];
      this.data4 = [];
      this.getInfo();
    },
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(`/chaoxing/collegeratio/info/${this.year}`),
        method: "get",
      }).then((response) => {
        // console.log("考研考公情况", response.data.data);
        this.info = response.data.data;
        this.$nextTick(() => {
          for (let index in this.info) {
            if (response.data.data[index].college == "电信与智能制造学院") {
              this.xAxisData.push("电信学院");
            } else if (
              response.data.data[index].college == "计算机与软件工程学院"
            ) {
              this.xAxisData.push("计算机学院");
            } else {
              this.xAxisData.push(response.data.data[index].college);
            }
            // this.xAxisData.push(response.data.data[index].college);
            this.data1.push(response.data.data[index].study);
            this.data2.push(response.data.data[index].studyOk);
            this.data3.push(response.data.data[index].civil);
            this.data4.push(response.data.data[index].civilOk);
          }
          this.initialize();
        });
      });
    },
    initialize() {
      // 在组件挂载后初始化图表
      echarts.use([
        ToolboxComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent,
        BarChart,
        CanvasRenderer,
      ]);

      var chartDom = document.getElementById("GEmain");
      var myChart = echarts.init(chartDom, zhuti);
      var option;

      // let xAxisData = [
      //   "学院",
      //   "学院",
      //   "学院",
      //   "学院",
      //   "学院",
      //   "学院",
      //   "学院",
      //   "学院",
      // ];
      // let data1 = [];
      // let data2 = [];
      // let data3 = [];
      // let data4 = [];

      //显示的条件
      //data1>data2，data3>data4

      // 模拟生成数据
      // for (let i = 0; i < 8; i++) {
      //   data1.push(Math.floor(Math.random() * 100));
      //   data2.push(Math.floor(Math.random() * 100));
      //   data3.push(Math.floor(Math.random() * 100));
      //   data4.push(Math.floor(Math.random() * 100));
      // }

      var emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(0,0,0,0.3)",
        },
      };

      option = {
        grid: {
          top: "20%", // 调整这里的数值来控制下移的距离
          bottom: "8%",
          left: "20%",
        },
        //四个标识图标
        legend: {
          data: ["考研人数", "上岸人数", "考公人数", "考公成功人数"],
          left: "0%",
          top: "-0%",
        },
        //左上角的两个工具
        toolbox: {
          top: "7%",
          feature: {
            //堆叠效果
            magicType: {
              type: ["stack"],
            },
            //数据展示
            dataView: {},
          },
        },
        //悬浮窗提示
        tooltip: {
          formatter: "{b}<br/>{a}：{c}<br/>",
        },
        xAxis: {
          axisLabel: {
            // interval: 0, // 强制显示所有类目
            margin: 10, // 设置文字与坐标轴之间的间距
            textStyle: {
                color: '#fff', // 设置标签文本颜色
                // 还可以添加其他样式属性，比如 fontFamily 等
            }
          },
        },
        yAxis: {
          data: this.xAxisData,
          // color:"#fff",
          // name: "院系",
          axisLine: { show:false },
          splitLine: { show: false },
          splitArea: { show: false },
          axisLabel: {
            // interval: 0, // 强制显示所有类目
            margin: 10, // 设置文字与坐标轴之间的间距
            textStyle: {
                color: '#fff', // 设置标签文本颜色
                // 还可以添加其他样式属性，比如 fontFamily 等
            }
          },
        },
        series: [
          {
            name: "考研人数",
            type: "bar",
            stack: "one",
            emphasis: emphasisStyle,
            data: this.data1,
          },
          {
            name: "上岸人数",
            type: "bar",
            stack: "one",
            emphasis: emphasisStyle,
            data: this.data2,
          },
          {
            name: "考公人数",
            type: "bar",
            stack: "two",
            emphasis: emphasisStyle,
            data: this.data3,
          },
          {
            name: "考公成功人数",
            type: "bar",
            stack: "two",
            emphasis: emphasisStyle,
            data: this.data4,
          },
        ],
        //工具：展示数据————表格的形式【可修改表格内的数据】
        optionToContent: function (opt) {
          var axisData = opt.xAxis[0].data;
          var series = opt.series;
          var table =
            '<table style="width:100%;text-align:center;padding:10px"><tbody><tr>' +
            "<th>学院</th>" +
            "<th>" +
            series[0].name +
            "</th>" +
            "<th>" +
            series[1].name +
            "</th>" +
            "<th>" +
            series[2].name +
            "</th>" +
            "<th>" +
            series[3].name +
            "</th>" +
            "</tr>";
          for (var i = 0, l = axisData.length; i < l; i++) {
            table +=
              "<tr>" +
              "<td>" +
              axisData[i] +
              "</td>" +
              "<td>" +
              series[0].data[i] +
              "</td>" +
              "<td>" +
              series[1].data[i] +
              "</td>" +
              "<td>" +
              series[2].data[i] +
              "</td>" +
              "<td>" +
              series[3].data[i] +
              "</td>" +
              "</tr>";
          }
          table += "</tbody></table>";
          return table;
        },
      };

      option && myChart.setOption(option);
    },
  },
  created() {
    this.getInfo();
  },
  mounted() {},
};
</script>
<style scoped>
.GEmain-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;

  /* border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}
#GEmain {
  width: 100%;
  height: 100%;
}
.xuanze {
  color:#8FE6F4;
  position: absolute;
  top: 33px;
  left: 15px;
  z-index: 1;

  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(121 ,226, 249, 0.6);
  border-bottom: 1px solid rgba(121 ,226, 249, 0.35);
  border-left: 1px solid rgba(121 ,226, 249, 0.35);

  /*清除select聚焦时候的边框颜色*/
  outline: none;
}


.xuanze option{
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(121 ,226, 249, 0.6);
  border-bottom: 1px solid rgba(121 ,226, 249, 0.35);
  border-left: 1px solid rgba(121 ,226, 249, 0.35);
}

.xuanze option:hover{
  color:#fff;
  background: rgba(121 ,226, 249, 0.25);
  backdrop-filter: blur(25px);
}

</style>
